import React from 'react'
import {Card, Row, Col, Modal} from 'antd'
import './ui.less'

export default class Gallery extends React.Component {
    constructor(){
        super()
        this.state = {
            visible: false,
            currentImg: '',
        }
    }
    openModal = (currentImg) => {
        this.setState({
            visible: true,
            currentImg
        })
    }
    render() {
        const imgs = [
            ['1.png','2.png','3.png','4.png','5.png'],
            ['6.png','7.png','8.png','9.png','10.png'],
            ['11.png','12.png','13.png','14.png','15.png'],
            ['16.png','17.png','18.png','19.png','20.png'],
            ['21.png','22.png','23.png','24.png','25.png'],
        ]
        const imgList = imgs.map((item) => item.map((img) =>
            <Card cover={<img src={'/gallery/'+img} />} key={img} style={{marginTop:10}} onClick={()=>this.openModal('/gallery/'+img)}>
                <Card.Meta
                    title={'图片标题'+img}
                    description={'this is desc'+img}
                />
            </Card>
            )
        )
        return <div>
                <Row gutter={10}>
                    <Col span={5}>
                        {imgList[0]}
                    </Col>
                    <Col span={5}>
                        {imgList[1]}
                    </Col>
                    <Col span={5}>
                        {imgList[2]}
                    </Col>
                    <Col span={5}>
                        {imgList[3]}
                    </Col>
                    <Col span={4}>
                        {imgList[4]}
                    </Col>
                </Row>
                <Modal
                    visible={this.state.visible}
                    onCancel={() =>{
                        this.setState({
                            visible:false
                        })
                    }}
                    title={'图片'}
                    footer={null}
                >
                    <img src={this.state.currentImg} alt="" style={{width:'100%'}}/>
                </Modal>
        </div>
    }
}
